<template>
    <div class="ci-step-caed">
        <!-- 卡片标题栏 -->
        <div class="title" :style="{backgroundColor: titleColor}" @click="showCard">
            <span>{{title}} <span v-show="statusText">（{{statusText}}）</span></span>
            <div>
                <!-- 计时时间图标 -->
                <Icon v-show="countDown" type="clock"></Icon>
                <!-- 计时时间显示 -->
                <span v-show="countDown">{{countDown}}</span>
                <Icon class="title-icon" :class="{'title-icon-rotate': showContent }" type="chevron-down"></Icon>
            </div>
        </div>
        <transition name="card-transition">
            <div class="content" v-show="showContent">
                <!-- 列表内容展示区域 -->
                <ul>
                    <li v-for="(item, index) in infoList">
                        <span class="li-title">{{item.key}}：</span>
                        <span class="li-text" v-html="item.value"></span>
                    </li>
                </ul>
                <!-- 处于完成状态，并且返回了完成状态的方法名，渲染对应按钮 -->
                <div class="cardBtn-area" v-if="info.UT_STATUS === 1 && info.FINISH_FUNCTION_NAME !== ''">
                    <div class="cardBtn" 
                        :style="{color: color, border: '1px solid ' + color}" 
                        @click="trigger">{{info.FINISH_FUNCTION_NAME}}</div>
                </div>
                <!-- 处于非完成状态，并且返回了一般状态的方法名，渲染对应按钮 -->
                <div class="cardBtn-area" v-else-if="info.UT_STATUS === 0 && info.FUNCTION_NAME !== ''">
                    <div class="cardBtn" 
                        :style="{color: color, border: '1px solid ' + color}" 
                        @click="trigger">{{info.FUNCTION_NAME}}</div>
                </div>
                <!-- 提示语 -->
                <div class="tips" v-if="Tips">
                    <div class="tips-title">Tips：</div>
                    <div class="tips-text" v-html="Tips"></div>
                </div>
            </div>    
        </transition>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' // 按需加载

dayjs.extend(relativeTime) // 使用插件
export default {
    name: 'ci-step-caed',
    data() {
        return {
            showContent: false,
            countDown: '',
            lessTime: ''
        }
    },
    props: {
        type: String,
        title: String,
        statusText: String,
        tips: String,
        infoList: Array,
        color: String,
        info: Object
    },
    computed: {
        // 标题颜色
        titleColor() {
            if (!this.info.IS_SHOW) {
                // 如果是禁止选择状态返回的颜色值
                return '#e4e4e4'
            } else {
                return this.color
            }
        },
        // 卡片提示
        Tips() {
            if (this.tips) {
                return this.tips
            } else {
                return null
            }
        }
    },
    created() {
        // 取的计时时间的秒数
        this.lessTime = this.info.COUNT_DOWN + 5
        // 判断是否有计时时间
        if (this.info.COUNT_DOWN > 0) {
            console.log(this.info.COUNT_DOWN)
            // 得到计时时间
            let countDown = this.getCountDown(this.lessTime)
            this.countDown = countDown
            // 每隔一秒重新计算计时时间
            let time = setInterval(() => {
                this.lessTime -= 1
                let countDown = this.getCountDown(this.lessTime)
                this.countDown = countDown
                console.log(!countDown || this.lessTime < 0)
                if (!countDown || this.lessTime < 0) {
                    this.$store.commit('SET_registInfo', null)
                    this.$store.dispatch('setRegisterInfo', this.$store.state.userInfo)
                    clearInterval(time)
                }
            }, 1000)
        }
        // 是否展开内容区
        this.isShowContent()
    },
    methods: {
        trigger() {
            this.$emit('trigger')
        },
        showCard() {
            if (this.info.IS_SHOW) {
                this.showContent = !this.showContent
            }
        },
        isShowContent() {
            if (this.info.IS_SHOW && this.info.STEP_ID === this.$store.state.CurrentStepInformation.STEP_ID) {
                this.showContent = true
            }
        },
        // 获取倒计时时间
        getCountDown(lessTime) {
            let t = lessTime
            var hours = parseInt((t % (60 * 60 * 24)) / (60 * 60))
            var minutes = parseInt((t % (60 * 60)) / (60))
            var seconds = parseInt(t % 60)
            if (t <= 0) {
                return ''
            }
            if (minutes < 10) {
                minutes = '0' + minutes
            }
            if (seconds < 10) {
                seconds = '0' + seconds
            }
            if (hours === 0) {
                return `${minutes}:${seconds}`
            } else {
                if (hours < 10) {
                    hours = '0' + hours
                }
                return `${hours}:${minutes}:${seconds}`
            }
        }
    }
}
</script>

<style lang="less">
.ci-step-caed {
    border-radius: 8px;
    overflow: hidden;
    .title {
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        color: #fff;
        font-weight: bolder;
        font-size: 14px;
        .title-icon {
            line-height: 21px;
            transform: rotate(0deg);
            transition: all 0.1s linear;
        }
        .title-icon-rotate {
            transform: rotate(180deg) translateY(4px);
        }
    }
    .content {
        padding: 8px 10px;
        border: 1px solid #f2f2f2;
        ul {
            margin: 0;
            padding: 0;
            li {
                list-style: none;
                padding: 3px 0;
                .li-title {
                    display: inline-block;
                    vertical-align: top;
                    font-weight: bolder;
                }
                .li-text {
                    display: inline-block;
                    width: calc(~"100% - 80px")
                }
            }
        }
        .cardBtn-area {
            margin: 8px 0;
            .cardBtn {
                display: inline-block;
                margin: 0 auto;
                text-align: center;
                padding: 4px 18px;
                border-radius: 5px;
                min-width: 130px;
            }
        }
        .tips {
            margin-top: 10px;
            color: #cccccc;
            .tips-title {
                display: inline-block;
                vertical-align: top;
            }
            .tips-text {
                display: inline-block;
                width: calc(~"100% - 70px")
            }
        }
    }
}
.card-transition-enter,
.card-transition-leave-to {
    max-height: 0px;
}
.card-transition-enter-active,
.card-transition-leave-active {
    transition: all 0.1s linear;
}
.card-transition-enter-to,
.card-transition-leave {
    max-height: 999px;
}
</style>
